import './Scss/EnvironmentPM25.scss'
import { Gauge } from '@ant-design/plots'
import { useState, useEffect } from 'react'

export const EnvironmentPM25001 = ({ data }) => {
    const [left, setLeft] = useState()
    const [center, setCenter] = useState()
    const [right, setRight] = useState()

    useEffect(() => {
        const left = {
            width: 200,
            height: 110,
            percent: data?.pm10 / 100,
            radius: 0.86,
            startAngle: Math.PI,
            endAngle: 2 * Math.PI,
            range: {
                color: [
                    'l(0) 0:rgba(0, 255, 78, 1) 0.5:rgba(255, 216, 0, 1) 1:rgba(255, 74, 50, 1)',
                    'rgba(58, 168, 226, 0.2)',
                ],
                width: 35,
            },
            indicator: null,
            statistic: {
                title: {
                    offsetY: -25,
                    style: { fontSize: '35px', color: '#fff', fontWeight: 'bold', fontFamily: 'Bahnschrift' },
                    formatter: ({ percent }) => (percent * 100).toFixed(0),
                },
                content: {
                    style: { fontSize: '15px', color: '#60EAFF', fontWeight: 'bold', fontFamily: 'PingFang' },
                    formatter: () => 'PM 2.5',
                },
            },
        }
        const center = {
            width: 390,
            height: 200,
            percent: data?.temperature / 100,
            radius: 0.8,
            startAngle: Math.PI,
            endAngle: 2 * Math.PI,
            range: { color: ['l(0) 0:#4ecbff  1:rgba(255, 74, 50, 1)', 'rgba(58, 168, 226, 0.2)'], width: 60 },
            indicator: null,
            statistic: {
                title: {
                    offsetY: -45,
                    style: { fontSize: '50px', color: '#fff', fontWeight: 'bold', fontFamily: 'Bahnschrift' },
                    formatter: ({ percent }) => ` ${(percent * 100).toFixed(0)}°C`,
                },
                content: {
                    style: { fontSize: '20px', color: '#60EAFF', fontWeight: 'bold', fontFamily: 'PingFang' },
                    formatter: () => '温度',
                },
            },
        }

        const right = {
            width: 200,
            height: 110,
            percent: data?.pm25 / 100,
            radius: 0.86,
            startAngle: Math.PI,
            endAngle: 2 * Math.PI,
            range: {
                color: [
                    'l(0) 0:rgba(0, 255, 78, 1) 0.5:rgba(255, 216, 0, 1) 1:rgba(255, 74, 50, 1)',
                    'rgba(58, 168, 226, 0.2)',
                ],
                width: 35,
            },
            indicator: null,
            statistic: {
                title: {
                    offsetY: -25,
                    style: { fontSize: '35px', color: '#fff', fontWeight: 'bold', fontFamily: 'Bahnschrift' },
                    formatter: ({ percent }) => (percent * 100).toFixed(0),
                },
                content: {
                    style: { fontSize: '15px', color: '#60EAFF', fontWeight: 'bold', fontFamily: 'PingFang' },
                    formatter: () => 'PM10',
                },
            },
        }

        setLeft(left)
        setCenter(center)
        setRight(right)
    }, [data])

    return (
        <div className="EnvironmentPM25001">
            <div className="left">{left && <Gauge {...left} />}</div>
            <div className="center">{center && <Gauge {...center} />}</div>
            <div className="right">{right && <Gauge {...right} />}</div>
        </div>
    )
}
